<template style="background-color: #f6f6f6">

  <el-card class="box-card" >

    <template #header>
      <div class="card-header">
        <span>信息管理</span>
        <span style="float: right;">
            <el-input
                style="float: left;width: 200px;"
                v-model="search"
                size="default"
                placeholder="输入关键字搜索"/>
            <el-cascader
                v-model="currentDeptIds"
                :options="treeData"
                :props="props"
                @change="initTable"
                collapse-tags
                clearable
            />
            <el-button @click="initUniversity"><el-icon><Refresh /></el-icon></el-button>
            <el-button type="primary" plain @click="openAddDialog()">创建二级管理员账号</el-button>
          </span>
      </div>
    </template>

    <div style="height: 90%">
      <el-table v-loading="tableLoading"
                row-key="id"
                :data="filterData"
                style="width: 100%; height:90%"
                border stripe >
        <el-table-column prop="workNumber" label="工号" width="150" align="center"/>
        <el-table-column prop="name" label="姓名" width="250" align="center"/>
        <el-table-column prop="department" label="部门" align="center"/>
        <el-table-column prop="phone" label="电话" width="200" align="center"/>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" @click="openSetupDialog(scope.row.id)">权限管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
          v-model="addDialogVisible"
          title="创建二级管理员"
          width="35%"
          style="text-align: center"
          align-center>
        <el-form :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="form.name" style="width: 450px;" />
          </el-form-item>
          <el-form-item label="工号">
            <el-input v-model="form.workNumber" style="width: 450px;" />
          </el-form-item>
          <el-form-item label="部门">
            <el-cascader
                v-model="form.deptId"
                ref="cascaderRef"
                :options="tempTreeData"
                :props="tempProps"
                style="width: 450px;"
            />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" style="width: 450px;" />
          </el-form-item>
        </el-form>

        <template #footer>
              <span class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取消</el-button>
                  <el-button
                      v-loading.fullscreen.lock="addLoading"
                      type="primary" @click="create">
                    确认
                  </el-button>
              </span>
        </template>
      </el-dialog>
      <el-dialog
          v-model="editDialogVisible"
          title="权限配置"
          width="25%"
          style="text-align: center"
          align-center>

        <el-checkbox-group v-model="currentPermission" class="vertical-checkbox-group">
          <el-checkbox v-for="p in all" :label="p.component" :value="p.id" />
        </el-checkbox-group>

        <template #footer>
              <span class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取消</el-button>
                  <el-button
                      v-loading.fullscreen.lock="editLoading"
                      type="primary" @click="setupPermission">
                    确认
                  </el-button>
              </span>
        </template>
      </el-dialog>
    </div>

  </el-card>

</template>

<script >

import moment from 'moment';
import { ElMessage } from 'element-plus'
import {Edit, Plus, Refresh} from "@element-plus/icons-vue";
import university from "@/view/university/index.vue";
export default {
  components: {Plus, Edit, Refresh},
  data(){
    return{
      file:'',
      teacherData:'',
      extension:'',
      current:1,
      currentPage:1,
      pageCount:0,
      dataId:'',
      importData:[],
      tableData:[],
      uniName: '',
      currentUniId: '',
      treeData:[],
      currentDeptIds:[],
      currentId:'',
      tempTreeData:[],
      all:[],
      currentPermission:[],
      tempUniId:'',
      tableLoading:false,
      editLoading:false,
      addLoading:false,
      search:'',
      addDialogVisible:false,
      editDialogVisible:false,
      form:{
        id:'',
        uniId:'',
        workNumber:'',
        name:'',
        phone:'',
        department:'',
        deptId:''
      },
      props: {
        value: 'id',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath:false,
        multiple: true
      },
      tempProps:{
        value: 'id',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath:false
      }
    }
  },
  computed:{
    filterData(){
      return this.tableData.filter((data) => {
        return !this.search || data.name!=null&&data.name.toLowerCase().includes(this.search.toLowerCase())||data.id===this.search;
      });
    }
  },
  methods : {
    create(){
      this.form.uniId=this.currentUniId;
      this.form.department=this.$refs.cascaderRef.presentText;
      this.$http.post("/user/userManager/create/sec/uni/admin",this.form).then((response) => {
        if (response.data.code === 200) {
          this.addDialogVisible=false;
          this.$message({message: "创建成功！",type: "success"});
        } else {
          this.$message.error(response.data.msg);
        }
      });
    },
    openAddDialog(){
      this.form={
        id:'',
        uniId:'',
        workNumber:'',
        name:'',
        phone:'',
        department:'',
        deptId:''
      }
      this.tempTreeData=this.treeData;
      this.addDialogVisible=true;
    },
    openSetupDialog(id){
      this.currentId=id;
      this.$http.get("/user/userManager/select/sec/uni/admin/permission?userId="+id)
          .then((resp)=>{
            if(resp.data.code===200){
              this.all=resp.data.data.all;
              this.disable=resp.data.data.disable;
              let currentPermission=[];
              console.log(this.all);
              for(let i=0;i<this.all.length;i++){
                console.log("p："+this.all[i]);
                if(this.disable.indexOf(this.all[i].id)===-1){
                  currentPermission.push(this.all[i].id);
                }
              }
              console.log("测试"+currentPermission);
              this.currentPermission=currentPermission;
            }
            this.editDialogVisible=true;
          });
    },
    setupPermission(){
      this.editLoading=true;
      this.$http.put("/user/userManager/update/sec/uni/admin/permission",{
        userId:this.currentId,
        permissions:this.currentPermission
      }).then((response) => {
        console.log(response);
        if(response.data.code===200){
          ElMessage.success("修改成功！");
        }
        else {
          ElMessage.error(response.data.msg);
        }
        this.editLoading=false;
        this.editDialogVisible=false;
      });
      this.editLoading=false;
      this.editDialogVisible=false;
    },
    initTempDepartment(){
      this.$http.get("/user/department/structure?uniId="+this.currentUniId)
          .then((resp)=>{
            if(resp.data.code===200){
              if(resp.data.data.length===0){
                return;
              }
              this.tempTreeData=resp.data.data[0].children;
              if(this.tempTreeData.length!==0){
                this.form.deptId=this.tempTreeData[0].id;
              }
            }
          })
    },
    initDepartment(){
      this.$http.get("/user/department/structure?uniId="+this.currentUniId)
          .then((resp)=>{
            if(resp.data.code===200){
              if(resp.data.data.length===0){
                return;
              }
              this.treeData=resp.data.data[0].children;
              const deptIds=[];
              if(this.treeData.length!==0){
                for (let i=0;i<this.treeData.length;i++){
                  deptIds.push(this.treeData[i].id);
                }
              }
              this.currentDeptIds=deptIds;
              this.initTable();
            }
          })
    },
    initUniversity(){
      this.tableLoading=true;
      this.currentUniId=localStorage.getItem("uniId");
      this.uniName=localStorage.getItem("uniName");
      this.initDepartment(this.currentUniId);
      this.tableLoading=false;
    },
    initTable(){
      console.log(this.currentDeptIds);
      if(this.currentDeptIds.length===0){
        this.tableData = [];
        return;
      }
      this.tableLoading=true;
      this.$http.post("/user/userManager/select/sec/uni/admin",{
        uniId:this.currentUniId,
        deptIds:this.currentDeptIds
      }).then((response) => {
        console.log(response);
        if(response.data.code===200){
          this.tableData=response.data.data;
          this.tableLoading=false;
        }
      });
      this.tableLoading=false;
    }
  },
  mounted(){
    this.initUniversity();
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  height: 94%;
}
.upload_div {
  margin-bottom: 20px;
  width: 114px;
}
.vertical-checkbox-group .el-checkbox {
  display: block; /* 每个复选框独占一行 */
  margin: 8px 0; /* 调整间距 */
}
</style>